<script setup lang="ts">
// ------------------use------------------
// #region
withDefaults(
  defineProps<{
    direction?: 'horizontal' | 'vertical'
  }>(),
  {
    direction: 'vertical',
  },
)
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region

// #endregion
</script>

<template>
  <div
    class="width-fill height-fill b-scrollbar box-border"
    :class="[direction]"
  >
    <slot />
  </div>
</template>

<style lang="scss" scoped>
.b-scrollbar {
  @include roll();
  &.horizontal {
    overflow-y: hidden;
    overflow-x: visible;
  }
  &.vertical {
    overflow-x: hidden;
    overflow-y: visible;
  }
}
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
